<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .btn-ol>li {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 10px;
      margin: 5px;
      background: lightcoral;
      text-align: center;
      line-height: 35px;
      color: #fff;
    }

    .dialog {
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dialog .mask {
      width: 100vw;
      height: 100vh;
      position: absolute;
      left: 0;
      top: 0;
      background: #000;
      opacity: .6;
    }

    .dialog .tip {
      width: 60%;
      height: 60%;
      background: #fff;
      z-index: 10;
    }

    .showDialog {
      display: none;
    }
  </style>
</head>

<body>

  <div class="dialog showDialog">
    <div class="mask"></div>
    <div class="tip">
      <div class="content-wrapper">
        <h1 style="color: blue;"><%= title%></h1>
        name:<input type="text" class="name"> <br>
        gender: <input type="text" class="gender"> <br>
        address: <input type="text" class="address"> <br>
        date: <input type="date" class="date"> <br>
        <button class="btn">添加数据成功跳转到产品页面</button>
      </div>
      <button class="sure">确定</button>
      <button class="close">取消</button>
    </div>
  </div>


  <h1 style="color: blue"><%= title%></h1>

  <ul class="content">
  </ul>

  <ol class="btn-ol">
  </ol>

  <button class="test">test</button>

  <script src="js/axios.js"></script>
  <script>

    const dialog = document.querySelector('.dialog');
    const sure = document.querySelector('.sure');
    const close = document.querySelector('.close');
    const test = document.querySelector('.test');


    const name = document.querySelector('.name')
    const gender = document.querySelector('.gender')
    const address = document.querySelector('.address')
    const date = document.querySelector('.date')
    let msgBtn = '';

    function getData(url, params) {
      return axios.get(url, { params })
    }

    function postData(url, data, fn) {
      return axios.post(url, data)
    }

    test.onclick = async function () {
      window.location.href = './add'
      // let data = await postData('/api/login', {
      //   user: 'devin',
      //   pwd: '123'
      // })
      // console.log(data, 'data')
    }



    async function dailogSure(msgBtn) {
      if (name.value && gender.value && address.value && date.value) {
        if (msgBtn === 'update') {
          let data = await postData('/api/update', {
            index: 0,
            name: name.value.trim(),
            gender: gender.value.trim(),
            address: address.value.trim(),
            date: date.value.trim(),
          })
          data.code === 0 ? getPage(0) : ''
          dialog.classList.add('showDialog')
        } else {
          let data = await postData('/api/add', {
            name: name.value.trim(),
            gender: gender.value.trim(),
            address: address.value.trim(),
            date: date.value.trim(),
          })
          if (data.code === 0) {
            console.log(data, 'data')
          }
        }
      }
    }


    getPage(0)
    // 获取数据函数
    async function getPage(page, size = 5) {
      let data = await getData('/api/page', {
        page,
        size
      })
      // 渲染函数
      renderHtml(data)
      // 渲染按钮
      btnFn(data)
      deleteFn();
      updateFn()
    }


    // 渲染分页数据
    function renderHtml(res) {
      const content = document.querySelector('.content');
      // 渲染内容
      let result = res.data.data
      content.innerHTML = result.map((item, index) => {
        return `<li>
          <span>${item.name}</span> 
          <span>${item.gender}</span> 
          <span>${item.address}</span> 
          <span>${item.date}</span> 
          <button class="updateBtn" data-index=${index}>更改</button>
          <button class="delBtn" data-index=${index}>删除</button>
          </li>`
      }).join('')
    }

    // 渲染按钮函数
    function btnFn(res) {
      const btnContent = document.querySelector('.btn-ol');
      // 根据数据的总条数 计算按钮
      let btnNum = Math.ceil(res.data.total / 5)
      let str = ''
      for (let i = 0; i < btnNum; i++) {
        str += `<li>${i + 1}</li>`
      }
      btnContent.innerHTML = str;

      // 获取渲染之后的按钮
      const libtn = document.querySelectorAll('.btn-ol>li');
      libtn.forEach((item, index) => {
        item.onclick = function () {
          // 调用分页 重新请求数据
          getPage(index, 5)
        }
      })
    }

    // 按钮删除函数
    function deleteFn() {
      const deleteBtn = document.querySelectorAll('.delBtn')
      deleteBtn.forEach((item, index) => {
        item.onclick = function () {
          axios.get('/api/delete', {
            params: {
              index
            }
          }).then(res => {
            // 渲染内容
            getPage(0, 5)
          })
        }
      })
    }

    function updateFn() {
      const updateBtn = document.querySelectorAll('.updateBtn');
      updateBtn.forEach((item, index) => {
        item.onclick = function () {
          msgBtn = 'update'
          dialog.classList.remove('showDialog')
        }
      })
    }




    // function getData() {
    //   axios.get('/api/list').then(res => {
    //     console.log(res.data.data)
    //     let result = res.data.data
    //     content.innerHTML += result.map((item) => {
    //       return `<li>
    //       <span>${item.name}</span> 
    //       <span>${item.gender}</span> 
    //       <span>${item.address}</span> 
    //       <span>${item.date}</span> 
    //       </li>`
    //     }).join('')
    //   })
    // }



  </script>

</body>

</html>